/*
 功能说明:
 1. 点击向右(左)的图标, 平滑切换到下(上)一页
 2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页
 3. 每隔3s自动滑动到下一页
 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换
 5. 切换页面时, 下面的圆点也同步更新
 6. 点击圆点图标切换到对应的页

 bug: 快速点击下一页时, 有问题(设置一个开关阀 判断是否在移动中)
 */
$(function () {
    // 获取轮播最外层的对象
    var $luobo = $("#luobo");
    // 获取轮播展示的对象
    var $banner = $("#banner");
    // 获取原点的对象
    var $circle = $("#circle>li");
    // 获取上一页按钮
    var $pre = $("#prev");
    // 获取下一页的按钮
    var $next = $("#next");
    // 移动的总时间
    var TIME = 600;
    // 一页的宽度
    var PAGE_WIDTH = 1920;
    // 单位移动的间隔时间
    var ITEM_TIME = 20;
    // 图片的数量
    var imgCount = $circle.length;
    // 定义当前下标的
    var index = 0;
    // console.log(imgCount);
    // 是否正在翻页中
    var moving = false;


    // 实现自动翻页功能
    var intervalId2 = setInterval(function () {
        nextPage(true)
    }, 6000);

    $next.click(function () {
        nextPage(true)
    })
    $pre.click(function () {
        nextPage(false)
    })

    // 定义点击函数(实现点击翻页)
    function nextPage(next) {
        if (moving) {
            return
        }
        // 正在翻页
        moving = true
        var offset = 0;
        if (typeof next === "boolean") {
            // next值为true为下一页，false则调用上一页
            offset = next ? -PAGE_WIDTH : PAGE_WIDTH
        } else {
            offset = -PAGE_WIDTH *(next - index)
        }
        // 获取当前的偏移量
        // 获取的偏移量会有小数四舍五入取整到1920px
        var currentLeft = Math.round($banner.position().left)
        // console.log(currentLeft);
        // 计算单位时间移动的距离
        var ITEM_PAGE = offset / (TIME / ITEM_TIME);
        // console.log(ITEM_PAGE);
        // 定义目标的偏移量
        var targetOffset = currentLeft + offset
        // 定义一个定时器实现翻页
        var intervalId = setInterval(function(){
            currentLeft += ITEM_PAGE
            if (currentLeft == targetOffset) {
                clearInterval(intervalId);
                // 翻页已经完成
                moving = false
            }
            // 当移动到第一张图片时
            if (currentLeft === 0) {
                // 回到倒数第二张图片
                currentLeft = imgCount * -PAGE_WIDTH
                // 当移动到倒数第一张时
            } else if (currentLeft === -PAGE_WIDTH * (imgCount + 1)) {
                // 移动到第二张图片上
                currentLeft = -PAGE_WIDTH
            }
            $banner.css({
                left: currentLeft
            })
        }, ITEM_TIME);
        updatePoints(next)
    }
    // 当鼠标进入luobo区域时停止移动，移除时开始移动
    $luobo.hover(function () {
        clearInterval(intervalId2)
    }, function () {
        intervalId2 = setInterval(function () {
            nextPage(true)
        }, 6000);
    })
    // 定义更新原点的函数
    function updatePoints(next) {
        // 设置目标坐标
        var targetIndex = 0
        if (typeof next === 'boolean') {
            if (next) {
                targetIndex = index + 1
                if (targetIndex === imgCount) {
                    targetIndex = 0
                }
            } else {
                targetIndex = index - 1
                if (targetIndex === -1) {
                    targetIndex = imgCount - 1
                }
            }
        } else {
            targetIndex = next
        }
        // 移出当前下标的class
        $circle[index].className = '';
        // 给目标元素指定class
        $circle[targetIndex].className = 'active'
        // 更新当前的下标
        index = targetIndex
    }
    // 点击原点切换到对应的图片
    $circle.click(function () {
        // 获取到点击元素的下标
        var targetIndex = $(this).index();
        if (targetIndex != index) {
            nextPage(targetIndex)
        }
    })
})
